<template>
    <div ref="UI">
        <div class="titleBox">
            <i class="iconStyle" :class="{[`${elIconName}`]:true}" v-if="elIconName"></i>
            <!-- elIconName为空隐式转换 false -->
            <i class="iconfontcolor iconStyle" :class="{[`${iconName}`]:true}" v-if="!elIconName"></i>
            <h3 class="title">{{ title }}</h3>
            <div class="line"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 标题
        title: {
            typeof: String,
            default: '标题名称',
        },
        // 横线右边距
        lineMarginRight: {
            typeof: String,
            default: '24px',
        },
        // 传自定义图标类名  阿里的
        iconName:{
            typeof: String,
            default: 'icon-xinxi',
        },
        //传elmentUI的图标
        elIconName:{
            typeof: String,
            default: null,
        }
    },
    
    data() {
        return {
            setUI() {
                this.$refs.UI.style.setProperty('--lineMarginRight', this.lineMarginRight) // 给变量赋值
            }
        }
    },
    mounted(){
        this.setUI()

    },

}
</script>

<style lang="scss" scoped>
.titleBox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    >.iconStyle {
        font-size: 16px;
        margin-right: 7px;
    }

    >.title {
        color: #262626;
        font-size: 14px;
        margin-right: 14px;
    }

    >.line {
        margin-right: var(--lineMarginRight);
        height: 1px;
        flex: 1;
        background-color: #f0f0f0;
    }
}
</style>